CSS @media Rule

Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which t

The CSS @media at-rule lets us target browsers by certain characteristics, features, and user preferences, then apply styles or run other code based on those things.

@media 屬性是一個 CSS 中的媒體查詢（Media Query），它允許你根據不同的設備特性（如螢幕寬度、高度、解析度等）來應用不同的樣式。

Example: This example illustrates the use of the @media rule to implement the various styling properties based on the result of one or more media queries. The @media rule will only work if the media query matches the device on which the content is being u

Use @media at-rule to apply part of a style sheet based on media queries. Learn how to use this property with the help of examples.

在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 media，代表的就是針對指定的「媒體」設定樣式，這篇將會對 CSS 的 Media Queries 做個詳細介紹，也幫助自己未來撰寫時，更有個方向與參考。